<template>
    <view class="container">
        <view class="orders-switch">
            <view :class="'item ' + (showType == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
                <view class="txt">全部</view>
            </view>
            <view :class="'item ' + (showType == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
                <view class="txt">待付款</view>
            </view>
            <view :class="'item ' + (showType == 2 ? 'active' : '')" @tap="switchTab" data-index="2">
                <view class="txt">待发货</view>
            </view>
            <view :class="'item ' + (showType == 3 ? 'active' : '')" @tap="switchTab" data-index="3">
                <view class="txt">待收货</view>
            </view>
            <view :class="'item ' + (showType == 4 ? 'active' : '')" @tap="switchTab" data-index="4">
                <view class="txt">待评价</view>
            </view>
        </view>
        <view class="no-order" v-if="orderList.length <= 0">
            <view class="c">
                <text>还没有任何订单呢</text>
            </view>
        </view>

        <view class="orders">
            <navigator :url="'../orderDetail/orderDetail?id=' + item.id" class="order" open-type="redirect" v-for="(item, index) in orderList" :key="item.id">
                <view class="h">
                    <view class="l">订单编号：{{ item.orderSn }}</view>
                    <view class="r">{{ item.orderStatusText }}</view>
                </view>

                <view class="goods" v-for="(gitem, index1) in item.goodsList" :key="gitem.id">
                    <view class="img">
                        <image :src="gitem.picUrl"></image>
                    </view>

                    <view class="info">
                        <text class="name">{{ gitem.goodsName }}</text>
                        <text class="number">共{{ gitem.number }}件商品</text>
                    </view>

                    <view class="status"></view>
                </view>

                <view class="b">
                    <view class="l">实付：￥{{ item.actualPrice }}</view>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var api = require('../../../config/api.js');

export default {
    data() {
        return {
            orderList: [],
            showType: 0,
            page: 1,
            limit: 10,
            totalPages: 1,

            gitem: {
                id: '',
                picUrl: '',
                goodsName: '',
                number: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        let that = this;

        try {
            var tab = uni.getStorageSync('tab');
            this.setData({
                showType: tab
            });
        } catch (e) {}
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getOrderList();
        } else {
            uni.showToast({
                title: '没有更多订单了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.getOrderList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getOrderList() {
            let that = this;
            util.request(api.OrderList, {
                showType: that.showType,
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        orderList: that.orderList.concat(res.data.list),
                        totalPages: res.data.pages
                    });
                }
            });
        },

        switchTab: function (event) {
            let showType = event.currentTarget.dataset.index;
            this.setData({
                orderList: [],
                showType: showType,
                page: 1,
                limit: 10,
                totalPages: 1
            });
            this.getOrderList();
        }
    }
};
</script>
<style>
@import './order.css';
</style>
